<!DOCTYPE html>
<html lang="en">
	<head>
		<title>DOROODO图表设计器</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script language="javascript" src="plugin/jquery-1.8.0.min.js"></script>
		<script language="javascript" src="bootstrap/js/bootstrap.min.js"></script>
		<script language="javascript" src="plugin/bootstrapSwitch.js"></script>
		<script src="plugin/jquery.mousewheel.js"></script>
		<script src="plugin/jquery.minicolors.js"></script>
		<script src="js/ichart.1.2.1.src.beta.20140328.js"></script>
		<script src='js/jquery.timers.js'></script>
		<script src='js/ichart.data.js'></script>
		<script src="js/bootsrtapui.1.0.js"></script>
		<script src="js/uipainter.js"></script>
		<script src="js/ichartjs.data.js"></script>
		<script src="plugin/highlight.pack.js"></script>

		<link href="css/rainbow.css" rel="stylesheet">
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
			media="screen">
		<link href="bootstrap/css/bootstrap-responsive.min.css"
			rel="stylesheet">
		<link href="css/bootstrapSwitch.css" rel="stylesheet">
		<link href="css/jquery.minicolors.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body class="edit">
		<div class="navbar-fixed-top navbar-shade">
			<button autocomplete="off" type="button"
				class="btn btn-block btn-large btn-primary" id="ide-back-edit">
				<i class="icon-fullscreen"></i>&nbsp;编辑&nbsp;(Click&nbsp;or&nbsp;Esc)
			</button>
		</div>
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li class="divider-vertical"></li>
							<li>
								<div class="btn-group">
									<button class="btn btn-small btn-primary dropdown-toggle"
										data-toggle="dropdown" href="#">
										<i class="icon-th "></i> 新建
										<span class="caret"></span>
									</button>
									<ul class="dropdown-menu">
										<li>
											<a href="javascript:BootStrap.create('column2d','2D柱形图');">柱形图</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="javascript:BootStrap.create('pie2d','2D饼图');">饼图</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="javascript:BootStrap.create('bar2d','2D条形图');">条形图</a>
										</li>
									</ul>
								</div>

								<div class="btn-group">
									<button class="btn btn-small btn-primary dropdown-toggle"
										data-toggle="dropdown" href="#">
										<i class="icon-refresh "></i> 载入
										<span class="caret"></span>
									</button>
									<ul class="dropdown-menu pull-left" id="ide-example">
										<li class="divider">
										</li>
										<li class="dropdown-submenu">
											<a href="#">本地文件</a>
											<ul class="dropdown-menu" id="ide-local">
												<li class="divider"></li>
												<li>
													<a href="#">采用localStorage存储</a>
												</li>
											</ul>
										</li>
									</ul>
								</div>

								<div class="btn-group" data-toggle="buttons-radio">
									<button autocomplete="off" type="button"
										class="active btn btn-small btn-primary" id="ide-edit">
										<i class="icon-edit "></i> 编辑
									</button>
									<button autocomplete="off" type="button"
										class="btn btn-small btn-primary" id="ide-preview">
										<i class="icon-eye-open "></i> 预览
									</button>
								</div>
								<div class="btn-group">
									<button class="btn btn-small btn-primary" id="ide-save">
										<i class="icon-share "></i> 保存
									</button>
									<button class="btn btn-small btn-primary" id="ide-clear">
										<i class="icon-trash "></i> 清空
									</button>
								</div>
                                <div class="btn-group">
									<button class="btn btn-small btn-primary" id="ide-code">
										<i class="icon-eye-open "></i> 源代码
									</button>
									<button class="hide" id="ide-sys-code">
										<i class="icon-eye-open "></i> 源代码
									</button>
								</div>
							</li>
						</ul>
						<ul class="nav pull-right">
							<li>
								<button class="btn btn-success btn-small" id="ide-data" href="#data">
									<i class="icon-edit "></i> 数据源
								</button>
								<li class="divider-vertical"></li>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="sidebar-nav">
					<div class="accordion" id="accordion2">
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseMain"> <i
									class="icon-th-list "></i> 主配置 </a>
							</div>
							<div id="collapseMain" class="accordion-body collapse">
								<div class="accordion-inner">

								</div>
							</div>
						</div>
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseSub"> <i
									class="icon-th-list "></i> 子配置 </a>
							</div>
							<div id="collapseSub" class="accordion-body collapse">
								<div class="accordion-inner">
								</div>
							</div>
						</div>
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseTitle"> <i
									class="icon-th-list "></i> 标题 </a>
							</div>
							<div id="collapseTitle" class="accordion-body collapse">
								<div class="accordion-inner">

								</div>
							</div>
						</div>
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseSubTitle"> <i
									class="icon-th-list "></i> 副标题 </a>
							</div>
							<div id="collapseSubTitle" class="accordion-body collapse">
								<div class="accordion-inner">

								</div>
							</div>
						</div>
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseFoot"> <i
									class="icon-th-list "></i> 脚注 </a>
							</div>
							<div id="collapseFoot" class="accordion-body collapse">
								<div class="accordion-inner">

								</div>
							</div>
						</div>
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseLegend"> <i
									class="icon-th-list "></i> 图例 </a>
							</div>
							<div id="collapseLegend" class="accordion-body collapse">
								<div class="accordion-inner">
								</div>
							</div>
						</div>
						<div class="accordion-group" id="last-accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseCoo"> <i
									class="icon-th-list"></i> 坐标系 </a>
							</div>
							<div id="collapseCoo" class="accordion-body collapse">
								<div class="accordion-inner">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="ide-container" style="min-height: 480px;">
					<div id="ichart-render"></div>
				</div>
			</div>
		</div>
		<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="false"
			style="width:1200px;" data-backdrop="static">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">
					×
				</button>
				<h3 id="myModalLabel">
					<div id="dialog-form" title="创建图表">
						创建图表
					</div>
				</h3>
			</div>
			<div class="modal-body">
<div class="row">
<div class="span4">
				<div class="row-fluid">
					<div class="span12">
						<p class="label label-important" id="validateTips">
							*项文本均为必填项.
						</p>
					</div>
					<div class="span12 input-prepend">
						<span class="add-on">标&nbsp;&nbsp;&nbsp;题<span class="text-error">*</span></span>
						<input class="span10" autocomplete="off"  id="form_title" type="text"
							placeholder="请输入标题" value="DOROODO图表">
					</div>
					<div class="span12 input-prepend">
						<span class="add-on">副标题&nbsp;</span>
						<input class="span10" autocomplete="off"  id="form_subtitle" type="text"
							placeholder="请输入副标题">
					</div>
					<div class="span12 input-prepend">
						<span class="add-on">脚&nbsp;&nbsp;&nbsp;注&nbsp;</span>
						<input class="span10" autocomplete="off"  id="form_footnote" type="text"
							placeholder="请输入脚注">
					</div>
</div>
</div>
<div class="row-fluid">
<div class="span8">
					<div class="span12 input-prepend">
					<button id="ide-add-row" class="btn btn-success float-left">
						<i class="icon-plus"></i>增加一行数据
					</button>
					
					<button class="btn btn-primary" id='save_btn'>
						应用
					</button>
					<button class="btn" data-dismiss="modal" aria-hidden="true">
						取消
					</button>
					</div>
					<div class="span12 ide-data">
						<table class='table table-bordered table-striped table-condensed'
							id='ide-data-table'>
							<thead>
								<tr>
									<th>
										名称<span class="text-error">*</span>
									</th>
									<th style="width: 100px;">
										默认数值(数字)<span class="text-error">*</span>
									</th>
									<th style="width: 104px;">
										颜色<span class="text-error">*</span>
									</th>
									<th style="width: 100px;">
										请求地址(数字)<span class="text-error"></span>
									</th>
									<th style="width: 20px;"></th>
								</tr>
							</thead>
							<tbody id='form_tbody'>
								<tr>
									<td>
										<input type="text" autocomplete="off" value="名称A" />
									</td>
									<td>
										<input type="number" autocomplete="off" class="form_text blur_val" value="20" />
									</td>
									<td class="td_color">
										<input type="text" autocomplete="off" class="myminicolors opacity" value="#4572a7" />
									</td>
										<td>
										<input type="text" autocomplete="off" value="" />
									</td>
									<td>
										<button type="button" class="btn btn-warning btn-mini disabled">
										<i class="icon-minus-sign icon-white"></i>
										</button>
									</td>
								</tr>
								<tr>
									<td>
										<input type="text" autocomplete="off" class="form_text blur_name" value="名称B" />
									</td>
									<td>
										<input type="number" autocomplete="off" class="form_text blur_val" value="30" />
									</td>
									<td class="td_color">
										<input type="text" autocomplete="off" class="myminicolors opacity" value="#aa4643" />
									</td>
										<td>
										<input type="text" autocomplete="off" value="" />
									</td>
									<td>
										<button type="button" class="btn btn-warning btn-mini disabled">
										<i class="icon-minus-sign icon-white"></i>
										</button>
									</td>
								</tr>
								<tr>
									<td>
										<input type="text" autocomplete="off" class="form_text blur_name" value="名称C" />
									</td>
									<td>
										<input type="number" autocomplete="off" class="form_text blur_val" value="40" />
									</td>
									<td class="td_color">
										<input type="text" autocomplete="off" class="myminicolors opacity" value="#89a54e" />
									</td>
										<td>
										<input type="text" autocomplete="off" value="" />
									</td>
									<td>
										<button type="button" class="btn btn-warning btn-mini">
										<i class="icon-minus-sign icon-white"></i>
										</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
</div>
</div>
			</div>
		</div>
		
		<div id="myTipModal" class="modal hide fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="false"
			data-backdrop="static">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">
					×
				</button>
				<h3>
					<div title="提示">
						提示
					</div>
				</h3>
			</div>
			<div class="modal-body">
				<div class="row-fluid">
					<div class="span12">
						<h2 class="text-error">
							有未保存的图表,you want?
						</h2>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" id='save_create_btn'>
					保存并新建
				</button>
				<button class="btn btn-primary" id='discard_create_btn'>
					丢弃并新建
				</button>
				<button class="btn" data-dismiss="modal" aria-hidden="true">
					取消
				</button>
			</div>
		</div>

        <div id="myCodeModal" class="modal hide fade" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" style="width: 660px;" aria-hidden="false"
             data-backdrop="static">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">
                    ×
                </button>
                <h3>
                    <div title="提示">
                        源代码
                    </div>
                </h3>
            </div>
            <div class="modal-body" style="padding: 2px 10px">
                <pre id="pre" style="padding: 0px"><code id="code" class="xml"></code></pre>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">
                    关闭
                </button>
            </div>
        </div>
	</body>
</html>

